<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    <script th:src="@{/js/jquery-3.6.3.js}"></script>-->
    <!-- 引入样式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link rel="stylesheet" href="/css/herder.css">

</head>

<style>
    .container {
        width: 80%;

        margin: 0 auto;
    }


    .label {
        color: grey;


    }

    .v {
        font-size: 17px;
    }

    .v > li {
        margin-top: 6px;
        float: left;
        /*min-width: 100px;*/
        line-height: 30px;
    }

    .v, span {
        margin-right: 20px;
    }

    .yuyuekanfang {
        display: block;
        width: 318px;
        height: 50px;
        background: #ff961e;
        margin-left: 40px;
        border-radius: 5px;
        text-align: center;
        line-height: 50px;
        font-size: 17px;
        color: white;
    }

    a:hover {
        background-color: rgb(255, 161, 53);
    }


    /***************/

</style>
<body>

<div id="app">
    <el-container>
        <el-header>
            <div class="header">
                <img class="log" src="http://139.224.186.148:10001/imgs/room/banner.png"/>


                <ul class="u">
                    <li class="l"><a href="/ziroom_portal/production/index">生活</a></li>
                    <li class="l"><a href="">服务</a></li>
                    <li class="l"><a href="/showRoom.html">租房</a></li>
                    <li class="l"><a href="/">首页</a></li>
                </ul>
            </div>


        </el-header>
        <el-main>
            <div class="container" style="margin-top: 20px">

                <el-row>
                    <el-col :span="16">
                        <div style="">

                            <el-carousel height="715px">
                                <el-carousel-item v-for="img in imgs" :key="img.id">
                                    <img :src="'http://139.224.186.148:10001/imgs/room/roomImgs/'+img.path"/>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div style="height: 500px;padding-left: 38px;padding-right: 38px">
                            <div>
                                <h2>{{roomDetail.quarters.name}}·{{roomDetail.roomtype}}
                                    <!--                                <el-button type="warning" icon="el-icon-star-off" circle></el-button>-->
                                </h2>
                            </div>
                            <div><h2 style="color: #FF961E">￥{{roomDetail.rent}}/月</h2></div>
                            <hr/>
                            <div>
                                <div style="margin-right: 50px;float: left">
                                    <div style="font-size: 25px">{{roomDetail.area}}</div>
                                    <div style="font-size: 10px">建筑面积</div>
                                </div>

                                <div style="margin-right: 50px;float: left">
                                    <div style="font-size: 25px">{{roomDetail.direction}}</div>
                                    <div style="font-size: 10px">朝向</div>
                                </div>

                                <div style="margin-right: 7px;float: left">
                                    <div style="font-size: 25px">{{roomDetail.roomtype}}</div>
                                    <div style="font-size: 10px">户型</div>
                                </div>
                            </div>
                            <div style="height: 68px;border-bottom: 1px solid grey"></div>
                            <div style="margin-top: 20px;padding-bottom:10px;border-bottom: 1px solid grey">
                                <el-row>
                                    <el-col :span="5"><span style="color: grey">位置</span></el-col>
                                    <el-col :span="19"><span>{{roomDetail.position}}</span></el-col>
                                </el-row>
                            </div>

                            <div style="margin-top: 20px;padding-bottom:10px;border-bottom: 1px solid grey">
                                <el-row>
                                    <el-col :span="5"><span style="color: grey">楼层</span></el-col>
                                    <el-col :span="19"><span>{{roomDetail.build}}</span></el-col>
                                </el-row>
                            </div>

                            <div style="margin-top: 20px;padding-bottom:10px;border-bottom: 1px solid grey">
                                <el-row>
                                    <el-col :span="5"><span style="color: grey">电梯</span></el-col>
                                    <el-col :span="19"><span v-if="roomDetail.quarters.elevator == '1'">有</span>
                                        <span v-if="roomDetail.quarters.elevator == '0'">无</span>

                                    </el-col>
                                </el-row>
                            </div>

                            <div style="margin-top: 20px;padding-bottom:10px;border-bottom: 1px solid grey">
                                <el-row>
                                    <el-col :span="5"><span style="color: grey">年代</span></el-col>
                                    <el-col :span="19"><span>{{roomDetail.quarters.years}}年建成</span></el-col>
                                </el-row>
                            </div>

                            <div style="margin-top: 20px;padding-bottom:10px;border-bottom: 1px solid grey">
                                <el-row>
                                    <el-col :span="5"><span class="s" style="color: grey">绿化</span></el-col>
                                    <el-col :span="19"><span>{{roomDetail.quarters.green}}</span></el-col>
                                </el-row>
                            </div>
                        </div>
                        <a class="yuyuekanfang" href="javascript:void(0)" @click="OrderFormVisible = true">预约看房</a>

                    </el-col>
                </el-row>


                <el-dialog title="预约看房" :visible.sync="OrderFormVisible" width="30%" center>
                    <el-form  style="margin: 0 auto">

<!--                        <el-form-item>-->
<!--                            <el-input style="width: 300px" v-model="orderForm.name" autocomplete="off"-->
<!--                                      placeholder="请输入您的姓名"></el-input>-->
<!--                        </el-form-item>-->

<!--                        <el-form-item>-->
<!--                            <el-input style="width: 300px" v-model="orderForm.phone" autocomplete="off"-->
<!--                                      placeholder="请输入您的手机号"></el-input>-->
<!--                        </el-form-item>-->

                        <el-form-item>
                            <el-date-picker
                                    v-model="time"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>


                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="OrderFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitOrder()">确 定</el-button>
                    </div>
                </el-dialog>
                <el-row>
                    <el-col :span="16">
                        <h2>房源简介</h2>
                        <div style="color: grey">
                            {{roomDetail.introduction}}
                        </div>

                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="16">
                        <h2>小区简介</h2>
                        <div>
                            <el-row :gutter="30">
                                <el-col :span="10">
                                    <img style="width: 330px;height: 240px"
                                         :src="'http://139.224.186.148:10001/imgs/'+roomDetail.quarters.img"/>
                                </el-col>

                                <el-col :span="14">
                                    <h2 style="margin: 0 0;padding-left: 40px">{{roomDetail.quarters.name}}</h2>
                                    <ul class="v">
                                        <li><span class="label">建筑年代</span> <span
                                                class="value">{{roomDetail.quarters.years}}</span>
                                        </li>
                                        <li><span class="label">建筑类型</span> <span class="value">板房</span></li>
                                        <li><span class="label">绿化率</span> <span
                                                class="value">{{roomDetail.quarters.green}}</span>
                                        </li>
                                        <li><span class="label">容积率</span> <span class="value"
                                                                                 style="margin-right: 100px">{{roomDetail.quarters.plotRatio}}</span>
                                        </li>
                                        <li><span class="label">物业公司</span> <span
                                                class="value">{{roomDetail.quarters.propertyPhone}}</span></li>
                                        <li><span class="label">物业电话</span> <span
                                                class="value">{{roomDetail.quarters.property}}</span></li>
                                    </ul>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>

<script th:inline="javascript">


    let vueApp = new Vue({
        el: "#app",
        data: {
            time: '',
            inputWidth: '20px',
            OrderFormVisible: false,
            imgs: [],
            roomDetail: {}
        },
        methods: {
            submitOrder() {
                this.OrderFormVisible = false;
                let url = `/orderRoom/addOrder?time=${this.time}&roomId=${this.roomDetail.id}`
                axios.post(url).then((res) => {
                    if(res.data =='201'){
                        location.href = "/ziroom_portal/user/login"
                        return;
                    }
                    const {data} = res
                    if (data == "ok") {
                        alert("预约成功")
                    } else {
                        alert("预约失败")

                    }
                })
            },
            goBack() {

            }
        },
        created() {
            this.roomDetail = [[${roomInfo}]]
            this.imgs = [[${imgs}]]
            console.log(this.imgs)

        }
    })

</script>
</html>